import type { PlusColumn, FieldValues } from "plus-pro-components";
import type { MessageInfo } from "@/api/message";
import { h, ref } from "vue";
import { useTable } from "plus-pro-components";

// 表单数据
export const formData = ref<FieldValues>();

const boldRender = (value: any, { row }) => {
  return h(
    "span",
    {
      style: {
        fontWeight: row.isRead ? "normal" : "bold"
      }
    },
    value
  );
};

export const { buttons } = useTable();
export const tableColumns: PlusColumn[] = [
  {
    label: "类型",
    width: 100,
    prop: "title",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    render: boldRender
  },
  {
    label: "消息内容",
    minWidth: 200,
    prop: "description",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    render: boldRender,
    hideInSearch: true
  },
  {
    label: "状态",
    width: 70,
    prop: "isRead",
    valueType: "select",
    options: [
      {
        label: "已读",
        value: true,
        color: "green"
      },
      {
        label: "未读",
        value: false,
        color: "red"
      }
    ]
  },
  {
    label: "创建时间",
    prop: "time",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      startPlaceholder: "请选择",
      endPlaceholder: "请选择",
      format: "YYYY-MM-DD"
    },
    hideInTable: true
  },
  {
    label: "创建时间",
    width: 150,
    prop: "createTime",
    valueType: "date-picker",
    tableColumnProps: {
      align: "center"
    },
    fieldProps: {
      format: "YYYY-MM-DD HH:mm"
    },
    hideInSearch: true
  }
];

// 按钮
buttons.value = [
  {
    text: (row: MessageInfo) => (row.isRead ? "标记未读" : "标记已读"),
    code: "read",
    props: (row: MessageInfo) => {
      return { type: row.isRead ? "info" : "success", plain: true };
    }
  },
  {
    text: "删除",
    code: "delete",
    props: { type: "danger", plain: true },
    confirm: {
      title: "系统提示",
      message: ({ row }) => {
        return `确定删除“${row.title}”吗？`;
      }
    }
  }
];
